<template>
    <div class="NoticeDetail" v-if="notice!=null">
        <div class="op">
            <el-row type="flex" justify="end">
              <el-button type="primary" size="mini" @click="setCarousel">{{isCarousel?'取消轮播':'设为轮播'}}</el-button>
							<el-button type="info" size="mini" @click="handleCloseAdminP">修改</el-button>
              <el-button type="success" size="mini" v-if="notice.status==0 || notice.status==-1" @click="checkNotice(1)">通过</el-button>
							<el-button type="warning" size="mini" v-if="notice.status==1" @click="checkNotice(-1)">不通过</el-button>
              <el-button type="danger" size="mini" @click="delNotice" v-if="notice.status==1 || notice.status==0 || notice.status==-1">删除</el-button>
							<el-button type="danger" size="mini" @click="hfDel" v-if="notice.status==-2">恢复</el-button>
            </el-row>
        </div>
        <notice-component :notice="notice"></notice-component>
        <div class="pl-list">
            <div class="item" v-for="(item,index) of comments" :key="item.commentId">
                <img :src="item.commentHeadImg" alt="">
                <div class="content">
                    <div class="userInfo">
                        <div class="name">{{item.commentNickname}}</div>
                        <div class="date">{{item.commentCreateDate}}</div>
                        <div class="pl-content">{{item.commentContent}}</div>
                    </div>
                </div>
                <div class="del" @click="delComment(index,item.commentId)">删除</div>
            </div>
        </div>
				
				<el-dialog
					title="修改公告记录"
					:visible.sync="dialogVisible"
					width="30%"
					:before-close="handleCloseAdminP">
					<el-form label-position="left" label-width="80px" >
						<el-form-item label="浏览数">
							<el-input v-model="notice.browseNum"></el-input>
						</el-form-item>
						<el-form-item label="收藏数">
							<el-input v-model="notice.collectionNum" type="number"></el-input>
						</el-form-item>
						<el-form-item label="转发数">
							<el-input v-model="notice.forwardNum" type="number"></el-input>
						</el-form-item>
					</el-form>
					
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="update">确 定</el-button>
					</span>
				</el-dialog>
    </div>
</template>
<script>
// @ 是 /src 的别名
import NoticeComponent from '../../components/notice_component.vue'
export default {
    name: 'NoticeDetail',
    props: {

    },
    data() {
        return {
					notice: null,
					comments: [],
					isCarousel:false,
					dialogVisible:false,
        }
    },
		created() {
			console.log(this.$route.params.id)
			this.axios.get('/client/notice/noticeDesc/'+this.$route.params.id)
			.then((res)=>{
				if(res.data.status==200) {
					console.log(res.data.data)
					let notice = res.data.data;
					this.notice = notice
					this.comments = notice.pageInfos.list
					this.isCarousel = notice.carousel!=0?true:false
					console.log(this.comments)
				}
				
			})
		},
    methods: {
			checkNotice(status) {
				let _event = event
				this.axios.get('/admin/checkNotice?noticeId='+this.notice.noticeId+'&status='+status)
				.then((res)=>{
						this.$notify({
							title: '操作成功',
							message: '成功设置公告状态',
							type: 'success'
						});
						this.notice.status = status
						this.notice.statusStr = status==-1?'不通过':'发布'
				})
			},
			//刪除評論
			delComment(index,commentId) {
				this.axios.get('/admin/delComeentByAdmin?commentId='+commentId)
				.then((res)=>{
						this.$notify({
							title: '操作成功',
							message: '评论已删除',
							type: 'success'
						});
						this.comments.splice(index,1)
				})
			},
			delNotice() {
				let _event = event
				this.axios.get('/admin/delNoticeByAdmin?noticeId='+this.notice.noticeId)
				.then((res)=>{
						this.$notify({
							title: '操作成功',
							message: '公告已删除',
							type: 'success'
						});
						this.notice.status=-2
						this.notice.statusStr = '已删除'
				})
				.catch(()=>{
					console.log("删除公告失败")
				})
			},
			// 设置为轮播图
			setCarousel() {
				let _event = event
				if(this.isCarousel) { // true 取消轮播
					this.axios.get('/admin/setCarousel?noticeId='+this.notice.noticeId+'&carouselDay=0')
					.then((res)=>{
							this.$notify({
								title: '操作成功',
								message: '公告已取消轮播',
								type: 'success'
							});
							this.isCarousel=false
					})
					
				}else { // 设为轮播
					this.axios.get('/admin/setCarousel?noticeId='+this.notice.noticeId+'&carouselDay=10')
					.then((res)=>{
							this.$notify({
								title: '操作成功',
								message: '公告已设为轮播',
								type: 'success'
							});
							this.isCarousel=true
					})
					
				}
				
			},
			// 修改浏览数,收藏数
			update() {
				this.axios.post('/admin/updateNotice',this.notice)
				.then((res)=>{
					console.log(res)
						this.$notify({
							title: '操作成功',
							message: '公告已修改',
							type: 'success'
						});
						this.dialogVisible=!this.dialogVisible;
				})
			},
			// 恢复删除
			hfDel() {
				this.axios.get('/admin/checkNotice?noticeId='+this.notice.noticeId+'&status='+0)
				.then((res)=>{
						this.$notify({
							title: '恢复成功',
							message: '该公告状态已修改为审核',
							type: 'success'
						});
						this.notice.statusStr = '审核'
						this.notice.status = 0
				})
			},
			// 打开修改信息面板
			handleCloseAdminP(){
				this.dialogVisible=!this.dialogVisible;
			}
    },
    components: {
        NoticeComponent
    }
}
</script>
<style scoped lang="styl">

.pl-list
    margin-top 30px
    .item
        display flex
        margin-bottom 15px
        &:hover
            background #EEE
        img
            width 60px
            height 60px
        .content
            flex 1
            margin-left 15px
            .name
                color #333
                font-size 16px
            .date
              color #888
              font-size 12px
              margin-bottom 8px
    .del
        cursor pointer
        color #f32

</style>